<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<head>
    <style type="text/css">
        * { margin: 0;padding: 0; list-style: none;}
        .con { width: 600px; margin: 100px auto ; border: 1px solid #000; padding: 10px}
        .con ul li { width: 200px;float: left;text-align: center;height: 25px;line-height: 25px;}
        .con ul {overflow: hidden}
        .con .btn { width:200px ; height: 22px;line-height:22px;display: block;border: 1px solid #000;
            text-decoration: none;color: #000000;text-align: center;
            background: url("../../image/点.png") no-repeat 30px center;margin: 0 auto}
    </style>
<script type="text/javascript">
    $(function () {
        //页面加载完成之后 我们先让li从第3个开始到最后(除了最后一个)隐藏关起来
        $('.con ul li:gt(2):not(:last)').hide();
        $('.btn').click(function () {
            $('.con ul li:gt(2):not(:last)').slideToggle();
            if ($(this).html()=='显示所有内容'){
                $(this).css('background-image','url(../image/点1.jpg)')
                $(this).html('隐藏所有内容')
            }else {
                $(this).css('background-image','url(../image/点.png)')
                $(this).html('显示所有内容')
            }

        })
    })
</script>
</head>
<body>
    <div class="con">
        <ul>
            <li>佳能</li>
            <li>索尼</li>
            <li>三星</li>
            <li>尼康</li>
            <li>松下</li>
            <li>卡西欧</li>
            <li>富士</li>
            <li>柯达</li>
            <li>宾得</li>
            <li>理光</li>
            <li>奥林巴斯</li>
            <li>明基</li>
            <li>其他品牌相机</li>
        </ul>
        <a href="javascript:;" class="btn">显示所有内容</a>
    </div>
</body>
</html>
